<template>
  <view class="user-center">
    <u-avatar :src="user.avatar" size="120" class="user-avatar"></u-avatar>
    <view class="user-name">{{ user.username }}</view>
    <view class="user-info">
      <view class="user-code">
        <view class="ucode">
          会员码:
          <text class="code-info">{{ user.user_code }}</text>
        </view>
        <u-icon
            class="icon-copy"
            name="/static/images/copy.png"
            size="30"
            color="blue"
            @click="copyText(user.user_code)"/>
      </view>
      <view class="user-level-container">
        <view class="user-level-title">会员等级: {{ user.level }}</view>
      </view>
      <view class="user-level-progress">
        <view class="user-level-progress-title">升级进度: {{ user.levelProgress }}%</view>
        <u-line-progress :percent="user.levelProgress" :striped="true" :striped-active="true"></u-line-progress>
      </view>
      <view class="user-data">
        <view class="user-balance">余额：
          <text class="balance" @click="gotoPath('/pages/packageA/user/log/credit')">{{ user.balance }}</text>
          元
        </view>
        <view class="user-points">积分：
          <text class="point" @click="gotoPath('/pages/packageA/user/log/point')">{{ user.points }}</text>
        </view>
      </view>
      <view class="button-group">
        <u-button type="primary" @click="recharge" shape="circle">充值</u-button>
        <u-button type="default" @click="shareQRCode" shape="circle">分享码</u-button>
      </view>
    </view>
    <u-modal v-model="showModal" :title="modalTitle" :show-cancel="true" :mask-close-able="true">
      <view class="slot-content">
        <rich-text :nodes="modalContent"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {centerInfo} from "@/pages/packageA/user/center_api";

export default {
  name: "userCenter",
  data() {
    return {
      user: {
        avatar: '',
        username: '',
        level: '普通会员',
        balance: 0.00,
        points: 0,
        user_code: '',
        levelProgress: 30,
        share_code: ''
      },
      showModal: false,
      modalTitle: '',
      modalContent: ''
    };
  },
  onShow() {
    this.showModal = false;
    if (this.hasLogin) {
      this.getCenterInfo();
    } else {
      this.$u.toast('请先登录');
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/index?from=user_center'
        });
      }, 1000);
    }
  },
  methods: {
    getCenterInfo() {
      centerInfo().then(res => {
        if (res.code === 0) {
          this.user = res.data.info;
        }
      });
    },
    recharge() {
      // 跳转到充值页面的逻辑
      uni.navigateTo({
        url: '/pages/packageA/user/recharge/recharge'
      });
    },


    shareQRCode() {
      this.modalTitle = '分享二维码';
      this.modalContent = `
      <div style="width: 200px;margin: 0 auto"><img alt="" width="100%"  src="` + this.user.share_code + `"/></div>
      `;
      let that = this
      setTimeout(()=>{
        that.showModal = true;
      },500)

    }
  }
}
</script>

<style lang="scss" scoped>
.user-center {
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9; /* 设置背景颜色 */
  border-radius: 15px; /* 设置圆角 */

}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* 确保头像为圆形 */
  border: 4px solid #fff; /* 添加边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.user-info {
  margin-top: 20px;
  text-align: center;
  background-color: #fff; /* 设置信息背景颜色 */
  padding: 30px; /* 设置内边距 */
  border-radius: 15px; /* 设置圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
  width: 100%;
  max-width: 400px; /* 最大宽度限制 */
  .user-code {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
    font-size: 18px;

    .code-info {
      color: #2f9de2;
    }

    .icon-copy {
      margin-left: 10px;
    }
  }
}

.user-level-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-level-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: #333; /* 设置文字颜色 */
}

.user-data {
  display: flex;
  justify-content: space-between;

  .user-balance, .user-points {
    margin-top: 20rpx;
    margin-bottom: 10px;
    font-size: 16px;
    color: #333; /* 设置文字颜色 */
  }

  .balance {
    color: rgba(218, 35, 231, 0.7);
  }

  .point {
    color: rgba(226, 64, 64, 0.76);
  }
}


.button-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 20px;
}

.u-button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.u-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.u-modal__content {
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.u-modal__title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.u-modal__text {
  font-size: 16px;
  color: #666;
}
</style>



